<template>  
    <div class="input_wrap">     
        <input  maxlength="3" @keyup="upnext($event)" @keydown="nextInput($event)" class="ip_input ip_a" type="number" @blur="testFormat('a',$event)"  @focus = "foucusStyle($event)" @paste = "copy($event)"> . 
        <input  maxlength="3" @keyup="upnext($event)" @keydown="nextInput($event)" class="ip_input ip_b" type="number" @blur="testFormat('b',$event)"  @focus = "foucusStyle($event)"> . 
        <input  maxlength="3" @keyup="upnext($event)" @keydown="nextInput($event)" class="ip_input ip_c" type="number" @blur="testFormat('c',$event)"  @focus = "foucusStyle($event)"> .
        <input  maxlength="3" @keyup="upnext($event)" @keydown="nextInput($event)" class="ip_input ip_d" type="number" @blur="testFormat('d',$event)"  @focus = "foucusStyle($event)">
    </div>		
</template>
<script>
import formatTest from 'libs/formatTest'
export default {
     props:{
       empty:{
           type: Boolean,
		   required: true
       },
       special:{
           type: Boolean
       }
    },
    methods:{
        testFormat(type,event) {
            let parent=  $(event.currentTarget).parent()
            let ip_a = parent.find(".ip_a").val()
            let ip_b = parent.find(".ip_b").val()
            let ip_c = parent.find(".ip_c").val()
            let ip_d = parent.find(".ip_d").val()
            let val =ip_a +"."+ip_b+"."+ip_c+"."+ip_d
            let reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ 
            let conditions = false  
            switch (type) {
                case 'a':
                    conditions =ip_b&&ip_c&&ip_d?true:false
                    break;
                 case 'b':
                    conditions = ip_c&&ip_d?true:false
                    break;
                 case 'c':
                    conditions = ip_d?true:false
                    break;
                case 'd':
                    conditions = true
                    break;
                default:
                    break;
            }
            if (conditions) {           
                if (reg.test(val)||(this.empty&&val==="...")) {
                    if (val=='0.0.0.0'&&!this.special) {
                        parent.addClass('error_foramt').addClass('animated shake')
                        setTimeout(()=> {
                            parent.removeClass('animated shake')
                        }, 200)
                        return false
                    } else {
                        return true
                    }
                } else {
                    parent.addClass('error_foramt').addClass('animated shake')
                    setTimeout(()=> {
                        parent.removeClass('animated shake')
                    }, 200)
                    return false
                } 
            }   
                                       
		},
        foucusStyle(event) {
            let parent=  $(event.currentTarget).parent()
            parent.removeClass("error_foramt")
        },
        copy(event) {
            event.preventDefault()
            let clipboardData = event.clipboardData || window.clipboardData
            let content = clipboardData.getData("text")
            let copytext = []
            if (content.indexOf('.')>0) {
              copytext =  content.split('.')
            }
            if (content.indexOf(':')>0) {
              copytext =  content.split(':')
            }
            let parent=  $(event.currentTarget).parent()
            parent.find('.ip_a').val(copytext[0]) 
            parent.find('.ip_b').val(copytext[1]) 
            parent.find('.ip_c').val(copytext[2]) 
            parent.find('.ip_d').val(copytext[3]) 
        },
        nextInput(event) {      
            if (event.keyCode==69||event.keyCode==229) {
                event.preventDefault()        
            } //不能输入字母e            
            if (event.keyCode==110||event.keyCode==190) {
               event.preventDefault()
               let val = $(event.currentTarget).val() 
               if (val) {
                   $(event.currentTarget).next().focus() 
                   $(event.currentTarget).next().select()
               }
            } 
            if (event.keyCode==39) {
               event.preventDefault()
               $(event.currentTarget).next().focus() 
               $(event.currentTarget).next().select()
            } 
            if (event.keyCode==37) {
                event.preventDefault()
               $(event.currentTarget).prev().focus()
               $(event.currentTarget).prev().select()    
            } 
        },
        upnext(event) {                
            if ($(event.currentTarget).val().length>2&&event.keyCode!=37&&event.keyCode!=39) {
                $(event.currentTarget).next().focus()   
                $(event.currentTarget).next().select() 
                $(event.currentTarget).val($(event.currentTarget).val().slice(0,3))
                return    
            }   
            if ($(event.currentTarget).val().length<=0&&event.keyCode==8) {
                event.preventDefault()
                $(event.currentTarget).prev().focus()  
                $(event.currentTarget).prev().select() 
                return     
            }
        },

    }
}

</script>